<template>
  <div>
    <el-table border style="width: 100%" :data="helpGroups">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="idno" label="身份证" />
      <el-table-column prop="lxdh" label="联系电话" />
      <el-table-column prop="gzdw" label="工作单位" />
      <el-table-column prop="gzzw" label="工作职务" />
      <el-table-column prop="sssf" label="所属身份" />
      <el-table-column prop="lxdz" label="联系地址" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['user:sjsk:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-hasPermi="['user:sjsk:remove']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0; text-align: center">
      <el-button type="primary" size="mini" @click="openHelpGroupModal"
        >新增成员</el-button
      >
    </div>
    <HelpGroupModal ref="helpGroupModalRef" @data-updated="loadHelpGroups" />
  </div>
</template>
<script>
import HelpGroupModal from "./helpGroupModal.vue";
import { getHelpGroupByUserId, delHelpGroup } from "@/api/user/helpGroup";
export default {
  components: {
    HelpGroupModal,
  },
  props: {
    typeId: {
      type: String,
    },
  },
  data() {
    return {
      helpGroups: [],
    };
  },
  watch: {
    typeId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          this.relations = [];
          this.loadHelpGroups();
        }
      },
    },
  },
  methods: {
    loadHelpGroups() {
      getHelpGroupByUserId(this.typeId).then((res) => {
        this.helpGroups = res.data;
      });
    },
    openHelpGroupModal() {
      this.$refs["helpGroupModalRef"].openModal(this.typeId);
    },
    handleUpdate(row) {
      this.$refs["helpGroupModalRef"].openModal(this.typeId, row.helpGroupId);
    },
    handleDelete(row) {
      const helpGroupIds = row.helpGroupId;
      this.$modal
        .confirm('是否确认删除编号为"' + helpGroupIds + '"的数据项？')
        .then(() => {
          return delHelpGroup(helpGroupIds);
        })
        .then(() => {
          this.loadHelpGroups();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {})
        .finally(() => {});
    },
  },
};
</script>
